<template lang="html">
	<div class="wrap">
     <div @click="goback()" class="goback">
     		<img src="../../static/img/houtui.png" /><span>返回</span><p>SECOO</p>
     </div>
     <img src="../../static/img/pageon1.jpg"/>
     <div class="bannerone">
     	<div class="p" refs>
     		<p class="p1" @click="change(1)">大包</p>
     		<p class="p2" @click="change(2)">钱包/手拿包</p>
     	</div>
     	<pageoneC :id="id"></pageoneC>
     </div>
	</div>
</template>
<script>
import pageoneC from './pageoneC'
import Pagetwo from './pagetwo'
export default {
	data(){
		return{result:{},id:"",}
	},
	methods:{
		goback(){
			history.back()
		},
		change(id){
			this.id=id;
		}
	},
	mounted(){
//		let pTop=document.getElementsByClassName('p')[0].offsetTop;
//		console.log(pTop)
		let _this = this;//此this指向的是vue
		window.onmousewheel = function (e) {
		  if(e.wheelDelta<0){
//		    _this.$refs.scrollerBottom && (_this.$refs.scrollerBottom.scrollBy(0, 30, false));//避免ref中不存在scrollerBottom
			$('.p').css({
				"position":"fixed",
				"top":"0",
				"width":"100%",
				"height":"1rem",
				"lineHeight":".8rem",
				"background":"white",
				"textAlign":"center"
			})}
//		  }else{
////		    _this.$refs.scrollerBottom && (_this.$refs.scrollerBottom.scrollBy(0, -30, false));
//			$('.p').css({
//				"width":"100%",
//				"background":"white",
//				"textAlign":"center"
//			})
//		  }
		}
	},
	watch:{},
	created(){},
	components:{
		pageoneC,
		Pagetwo
	}
}
</script>

<style lang="css">

*{
	margin:0;
	padding: 0;
}
.wrap{
	width: 100%;
	background: white;
	height: 40.5rem;
}
.wrap>img{
	width: 100%; 
}
.wrap .goback{
	background: white;
	width: 100%;
	height: 1.2rem;
	padding-top:.5rem;
	padding-left:2%;
}
	.wrap .goback>img{
		width: 6%;
		vertical-align: middle;
	}
	.wrap .goback sapn{
		font-size: .20rem;
	}
	.wrap .goback p{
		display: inline-block;
		margin-left:25%;
		font-weight: bold;
		font-size: .3rem;
	}
	.bannerone{
		background:white
	}
	.bannerone dl{
		width: 50%;
		height: 4.5rem;
		text-align: center;
		float: left;
		border-bottom:.02rem solid gainsboro;
		border-right: .02rem solid gainsboro ;
	}
	.bannerone dl dd>img{
		width: 90%;
	}
	.bannerone dl dt{
		width: 99%;
		margin-bottom: .2rem;
	}
	.bannerone .dt1{
		text-align: center;
		font-size: .25rem;
		height: .5rem;
	}
	.bannerone .dt2{
		text-align: left;
		padding-left:10%;
	}
	.bannerone .p{
		vertical-align: center;
	}
	.p1,.p2{
		margin:.2rem 0;
		text-align: center;
		width: 49%;
		display: inline-block;
		font-size: .3rem;
	}
</style>
